<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		input {
			border: 0;
			outline: none;
		}

		.box {
			position: relative;
			background-color: pink;
			display: inline-block;
		}

		.box .spans {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: skyblue;
		}

		.box .span1 {
			top: 0;
			left: 0;
		}

		.box .span2 {
			top: 50px;
			left: 50px;
		}

		.box .span3 {
			top: 100px;
			left: 100px;
		}
	</style>
</head>

<body>
	<input type="text">
	<div class="box">
		<div class="span1 spans">123</div>
		<div class="span2 spans">456</div>
		<div class="span3 spans">789</div>
	</div>
	<script>
		// let row = 6;
		// let col = 4
		// let table = [];
		// for (let i = 0; i < row; i++) {
		// 	let colArr = new Array(col).fill(false);
		// 	table.push(colArr)
		// }
		// table[2][0] = true
		// console.log(table);

		// let obj = [{
		// 	component: 'VButton',
		// 	label: '按钮',
		// 	propValue: {
		// 		type: 'success',
		// 		context: '点击'
		// 	},
		// 	icon: 'thumb',
		// 	isCurrent: false,
		// 	request: {},
		// 	style: {
		// 		width: 100,
		// 		height: 30,
		// 		borderWidth: 1,
		// 		borderColor: '#67C23A',
		// 		borderRadius: '',
		// 		fontSize: 14,
		// 		fontWeight: 400,
		// 		lineHeight: 5,
		// 		letterSpacing: 0,
		// 		textAlign: '',
		// 		color: '#fff',
		// 		backgroundColor: '#67C23A'
		// 	}
		// },
		// {
		// 	component: 'VInput',
		// 	label: '输入框',
		// 	propValue: '',
		// 	icon: 'notebook-1',
		// 	isCurrent: false,
		// 	request: {},
		// 	style: {
		// 		width: 200,
		// 		height: 28,
		// 		fontSize: '',
		// 		fontWeight: 400,
		// 		lineHeight: '',
		// 		letterSpacing: 0,
		// 		textAlign: '',
		// 		color: ''
		// 	}
		// },]
		// let res = JSON.stringify(obj);;
		// console.log(res);
		// let obj2 = JSON.parse(res)
		// console.log(obj2);
		// console.log(obj2[0] == obj[0]);

		// let pArr = [0, 1, 2, 3, 4];
		// let p = 2;
		// p++;
		// pArr = pArr.slice(0, p)
		// pArr.push(3)
		// console.log(pArr);

		// let cb = "alert('123')";
		// let fun = new Function(cb)
		// fun();


		// let arr = [1, 2, 3]
		// console.log(arr.includes(11));

		// let obj = {};
		// console.log(Object.keys(obj));


		// function foo() {
		// 	var num = 0;
		// 	function bar() {
		// 		num++;
		// 		console.log(num);
		// 	}
		// 	return bar
		// }

		// var fn = foo();
		// fn();
		// fn();
		// var fn1 = foo();
		// fn1();

		// let map = [1, 2, 3, 4, 5];
		// let arr = map.map(item => {
		// 	return true
		// })
		// console.log(map);
		// console.log(arr);


		// function bar(item) {
		// 	console.log(this);
		// 	// console.log(item);
		// }

		// var obj = {
		// 	name: 'yan'
		// }
		// var arr = [1, 22, 33, 4, 5];
		// arr.forEach(bar, obj)

		var name = 'window'
		function Person(name) {
			this.name = name;

			this.foo1 = function () {
				console.log(this.name);
			}

			this.foo2 = () => console.log(this.name);

			this.foo3 = function () {
				return function () {
					console.log(this.name);
				}
			}

			this.foo4 = function () {
				return () => console.log(this.name);
			}
		}

		var person1 = new Person('person1')
		var person2 = new Person('person2')

		// person1.foo1(); // person1
		// person1.foo1.call(person2) // person2

		// person1.foo2(); // person1
		// person1.foo2.call(person2); // person1

		// person1.foo3()(); // window
		// person1.foo3.call(person2)(); // window
		// person1.foo3().call(person2); // person2

		// person1.foo4()();// person1
		// person1.foo4.call(person2)(); // person2
		// person1.foo4().call(person2); // person1
	</script>
</body>

</html>